<!-- 过滤table所有显示列 -->

<template>
    <div class="table-fields-wrap">
        <el-checkbox-group v-model="checkedFields" @change="onFieldsChanged">
            <el-checkbox v-for="item in fieldList" v-if="item.prop" :label="item.prop">{{item.label}}</el-checkbox>
        </el-checkbox-group>
    </div>
</template>
<script>
export default {
    name: 'filter-table-field',
    computed: {},
    props: {
        fields: {
            default () {
                return []
            }
        },
    },
    mounted() {
        this.init();
    },
    computed: {},
    data() {
        return {
            checkedFields: [],
            fieldList: [],
        };
    },
    methods: {
        init() {
            this.fieldList = $.extend(true, [], this.fields);
            this.fieldList.forEach(item => {
                this.checkedFields.push(item.prop);
            });
        },
        onFieldsChanged() {
            this.$emit('showFieldsChanged', this.checkedFields);
        }
    }
}
</script>
<style lang="less">
.table-fields-wrap {
    padding: 25px 20px 0;
    margin-bottom: ;
    .el-checkbox {
        margin-left: 15px;
        margin-bottom: 15px;
    }
    .row {
        text-align: right;
    }
}
</style>
